<template>
  <div class="corp-nature">
    <div style="height: 100%;" ref="chart"></div>
  </div>
</template>
<script>
import echarts from 'echarts'
import {mapGetters} from 'vuex'
import {AutoHighLight} from '../../common/js/utils'
import {fallRise} from '../../common/js/mixin'
import $ from 'jquery'
import {INTERVAL} from '../../common/js/config'

export default {
  name: 'corp-nature-m',
  mixins: [fallRise],
  computed: {
    ...mapGetters([
      'currentTime'
    ])
  },
  data() {
    return {
      options: {
        title: {
          text: '用人单位性质分布图',
          left: 'center',
          top: '10',
          textStyle: {
            color: '#8cd1f7',
            fontSize: '18',
            align: 'center'
          }
        },
        color: ['#409eff', '#e29439', '#0be89c', '#73b0f0', '#ff6449', '#29b1ba', '#b43d6f', '#b29fdb'],
        tooltip: {
          trigger: 'item',
          formatter(params) {
            return `${params.name}<br>${params.value}家（${params.percent}%）`
          }
        },
        legend: {
          orient: 'vertical',
          x: 'left',
          show: false
        },
        series: [
          {
            name: '求职者学历分布',
            type: 'pie',
            minAngle: 10,
            center: ['50%', '57%'],
            radius: '70%',
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: 'center'
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: '18',
                  fontWeight: 'bold',
                  color: '#ffffff'
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: []
          }
        ]
      },
      current: {
        yearOnYearRate: '',
        ringRatioRate: ''
      }
    }
  },
  methods: {
    renderChart() {
      this.chart = echarts.init(this.$refs.chart)
      this.chart.setOption(this.options)
      let parentDom = $(this.$refs.text).parent()
      this.auto1 = new AutoHighLight({
        e: this.chart,
        cb: d => {
          this.current = d
        },
        enlarge: true,
        enlarged: (e) => {
          $(this.$refs.text).appendTo(e)
          $(this.$refs.text).addClass('static')
        },
        closed: () => {
          $(this.$refs.text).appendTo(parentDom)
          $(this.$refs.text).removeClass('static')
        }
      })
    },
    getData() {
      this.$post('/service/business/statistic/statistic/getCorpNautre', {
        beginDate: this.currentTime.start,
        endDate: this.currentTime.end
      }).then(res => {
        this.chart.setOption({
          series: [{
            data: res.result.map(item => {
              return {
                name: item.name,
                value: item.cnt,
                yearOnYearRate: item.yearOnYearRate,
                ringRatioRate: item.ringRatioRate
              }
            })
          }]
        })
      })
    },
    start() {
      clearInterval(this.timer)
      this.getData()
      if (this.currentTime.end === this.$dateFormat(new Date(), 'yyyy-MM-dd')) {
        this.timer = setInterval(() => {
          this.getData()
        }, INTERVAL)
      }
    }
  },
  created() {
    this.start()
    this.$watch('currentTime', () => {
      setTimeout(() => {
        this.start()
      }, 20)
    })
  },
  mounted() {
    this.renderChart()
  }
}
</script>
<style lang="scss" scoped>
  @import "../../common/style/variables";
  .corp-nature{
    height: 100%;
  }
  .bottom{
    height: 25.8%;
    display: flex;
    justify-content: center;
  }
  .middle{
    font-size: 14px;
    padding: 0 10px;
    .num{
      font-size: 30px;
    }
    img{
      margin-left: 5px;
    }
    p{
      display: flex;
      &:nth-child(1){
        align-items: center;
        color: #95b7f9;
      }
      &:nth-child(2){
        align-items: baseline;
        color: #00d1ff;
      }
    }
  }
  .static{
    position: absolute;
    left: 20px;
    bottom: 50px;
    width: 30%;
  }
</style>
